<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <div class="banner" :style="{height: obj.height}">
            <div class="banner-bg" :style="{height: obj.height,backgroundImage: `url(${obj.image})`}"/>
            <div class="banner-modal" :style="{height: obj.height}"/>
            <div class="banner-main">
                <div class="content-box col-text">
                    <h1 class="text-title" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''" v-html="obj.title"/>
                    <p class="text-desc" :class="obj.animateText? 'wow '+obj.animateText : ''" v-html="obj.smTitle"/>
                    <div class="button-box" :class="obj.animateButton? 'wow '+obj.animateButton : ''">
                        <el-button @click="goClick" type="primary">
                            {{ obj.button }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'Banner',
    mixins: [animate],
    props: {
        obj: {
            type: Object
        }
    },
    methods: {
        goClick() {
            if (this.obj.url) {
                window.open(this.obj.url)
            }
        }
    }

}
</script>

